
<template>

  <el-container style=" border: 1px solid #eee">
  <!-- <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu >
      <button style="width:100%;height:30px;margin-top:60px;border-radius:5px">addtodox</button>
      <button @click="jump" style="width:100%;height:30px;margin-top:60px;border-radius:5px">list</button>
    </el-menu>
  </el-aside> -->
   
  <leftside> </leftside>
  <el-container >
    
    <el-main>
      <template>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1">
          </el-date-picker>
        </div>
      </template>
      <template>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1">
          </el-date-picker>
          <span>time</span>
        </div>
      </template>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="重要程度">
          <el-select v-model="form.level" placeholder="请选择重要程度">
            <el-option label="等级1" value="1"></el-option>
            <el-option label="等级2" value="2"></el-option>
            <el-option label="等级3" value="3"></el-option>
            <el-option label="等级4" value="4"></el-option>
            <el-option label="等级5" value="5"></el-option>

          </el-select>
        </el-form-item>
        <!-- <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item> -->
        <el-form-item block label="详细内容">
          <mkdown id="contentEditor" ref="contentEditor" v-model="content" />
        </el-form-item>
        
        
        
        <el-form-item style="margin-top:100px" label="语言">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="php" name="type"></el-checkbox>
            <el-checkbox label="python" name="type"></el-checkbox>
            <el-checkbox label="scala" name="type"></el-checkbox>
            <el-checkbox label="bash" name="type"></el-checkbox>
            <el-checkbox label="java" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>


        
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>
   
</el-container>

</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
import {config} from '../util'
import Mkdown from './Mkdown'
import axios from 'axios'
import fetchJsonp from 'fetch-jsonp';
import leftside from './layout/leftside'

  export default {
    components: {
     Mkdown,
    leftside
    },
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        content:'',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        value1: '',
        value2: '',
        value3: '',
        input:'title',
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        tableData: Array(20).fill(item)
      }
    },
    methods: {
       jump:function(){
        this.$router.push('/list');
      },
      alert() {
        this.$message('这是一条消息提示');
      },
      success() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },

      warn(msg) {
        this.$message({
          message: msg,
          type: 'warning'
        });
      },

      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      },
     
      onSubmit() {
        var $this=this
        if(this.value1==''){
          this.warn('please input your start time ')
          return
        }
        if(this.value2==''){
          this.warn('please input your end time ')
          return
        }
        console.log(123)
        var starttime=this.value1.getTime()/1000
        var endtime=this.value2.getTime()/1000
        var title=this.form.name
        var istrue=this.form.delivery
        var language=this.form.type
        var tag=''
        for(var i=0;i<language.length;i++){
          var tag=tag+language[i]+','
        }
        tag=tag.slice(0,tag.length-1)

        console.log(language)
        var level=this.form.level
        var content=this.content
        var url=config.baseurl
        var requerturl=url+'/api/addtodo'
       
        var useTime=endtime -starttime
        if (useTime<=0){
          this.open3('input false time')
        }
        var data={
          startTime:starttime,
          endTime:endtime,
          title:title,
          note:content,
          level:level,
          useTime:useTime,
          tag:tag
        }
        console.log(data)
        var msg=function(obj){
          var url=''
          Object.keys(obj).forEach(function(key){
            // var value=obj[key].
            // value=value.replace('+','%2B')
            url+='&'+key+'='+obj[key]
          })
          url=url.slice(1,url.length)
          console.log(url)
          return url
        }
        var params = msg(data);
        requerturl=requerturl+'?'+params
        $this.fullscreenLoading = true;

        fetchJsonp(requerturl)
        .then(function(response) {
          return response.json()
        }).then(function(json) {
          $this.$router.push('/edittodo?id='+json);
        }).catch(function(ex) {
          console.log('parsing failed', ex)
          $this.fullscreenLoading = false;

        })

        
      }
    }
  };
</script>
<style>
.block{
  margin:15px;
}

</style>


           